<script setup>
	
</script>

<template>
  <view class="container round">
    <h1 class="span-top title">&nbsp;&nbsp;专家团队</h1>
    <div class="scroll">
      <scroll-view class="scroll-view_H" scroll-x="true">
        <div class="scroll-view-item_H" v-for="item in 4" :key="item">
          <image class="circle" src="/static/testImage.jpg"></image>
          <p class="name">123</p>
		  <p class="profession">123</p>
        </div>
      </scroll-view>
    </div>
  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  border-left: 5px solid rgb(30, 66, 159);
  color: rgb(30, 66, 159);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.span-top {
  margin-top: 10px;
}

.round {
  border-radius: 10px;
}

.scroll-view_H {
  white-space: nowrap; 
  display: flex;  
  overflow-x: auto; 
}

.scroll-view-item_H {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
}

image {
  width: 80px; 
  height: 80px; 
  border-radius: 50%;
  margin-bottom: 5px; 
}

.profession {
	font-size: 13px;
	color: rgb(156, 163, 175);
}
</style>